<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>添加地址</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>

      <style>
      body{
        background-color: #fcfcfc;
        height:100%;
        padding-top:40px;
      }
      ul li{
        list-style: none;
      }
      .header{
        width: 100%;height:40px;
      }
      .leftreturn{
        width:25px;
        height:25px;
        margin:7.5px;
        float: left;
      }
      .main{
        width:100%;
        height:auto;
        background-color: #fff;
      }
      .address_list{
        width:100%;
        height:auto;
      }
      .address_list li{

        height:60px;
        border-bottom: 1px solid #fcfcfc;
        padding-left: 20px;
        padding-top: 10px;
      }
      .name{
        font-size: 16px;
        font-weight: bold;

      }
      .telephone{
        font-size: 12px;

        /*color: #f1f1f1;*/

      }
      .dizhi{
        width: 80%;
        font-size: 14px;
        float: left;
      }
      p{
        display: inline-block;
      }
      .edit{
        /*color: #efefef;*/
        float: right;
        margin-right: 20px;
      }

      .delete{
         float:right;
         margin-right: 10px;
      }

      .addnewaddress{
        float: right;
        margin-right:20px;
        font-size: 16px;
        line-height: 40px;
      }

      </style>
  </head>
  <body>

    <div class="header">
      <img src="../../image/leftreturn.png" alt="" class="leftreturn" onclick="returnframe3();">
      <span class="addnewaddress"  onclick="Win_tjdz();">添加新地址</span>
    </div>
    <div class="main" id="main">
    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/SHA1.js"></script>
  <script type="text/javascript" src="../../script/doT.min.js"></script>
  <script type="text/x-dot-template"id="tmpl-3">
  <ul class="address_list">
  {{ for(var prop in it[0].address) { }}
    <li onclick="choice_address('{{=it[0].address[prop].id}}');">
      <p class="name">收件人：{{=it[0].address[prop].consignee}}</p>
      <p class="telephone">电话：{{=it[0].address[prop].mobile}}</p>
      <p class="dizhi">收件地址：{{=it[0].address[prop].location}} {{=it[0].address[prop].detailaddress}}</p>
      <span class="edit" onclick="Win_bjdz('{{=it[0].address[prop].id}}');">编辑</span>
      <span class="delete" onclick="deleteaddress('{{=it[0].address[prop].id}}');">删除</span>
    </li>
    {{ } }}
  </ul>
  </script>
  <script type="text/javascript">
      apiready = function(){
          init();
          init_listenevent();
      }

        function choice_address(id_){
          if(api.pageParam.spjsy){
          api.sendEvent({
              name: 'spjsy',
              extra: {
                  addressid: id_
              }
          });
          api.closeWin();
        }
        }

        function init(){
          var user = $api.getStorage('user');

          //使用doT模板将用户信息放入html中
          // 编译模板函数
          tmpltxt=doT.template(document.getElementById("tmpl-3").innerHTML);//生成模板方法
          document.getElementById("main").innerHTML=tmpltxt(user);//数据渲染
        }

        function init_listenevent(){
          api.addEventListener({
              name: 'csdz'
          }, function(ret, err){
              if( ret ){

                //使用doT模板将用户信息放入html中
                // 编译模板函数
                tmpltxt=doT.template(document.getElementById("tmpl-3").innerHTML);//生成模板方法
                document.getElementById("main").innerHTML=tmpltxt(ret.value.user);//数据渲染
              }else{}
          });

        }

        function deleteaddress(id_){

          	//获取X-APICloud-AppKey值
          	var now = Date.now();
          	appKey = SHA1("A6032422409194"+"UZ"+"808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44"+"UZ"+now)+"."+now
          	api.ajax({
          	    url: 'https://d.apicloud.com/mcm/api/address/'+id_,
          			method: 'POST',
          			cache:  false,
          			headers:{
          				"X-APICloud-AppId": "A6032422409194",
          				"X-APICloud-AppKey": appKey
          			},
          			data:{
                    values: {"_method":"DELETE"}
                    }
          	},function(ret, err){
          	    if (ret) {
          					var user = $api.getStorage('user');
          					for (var i = 0; i < user[0].address.length; i++) {
          						if(user[0].address[i].id==id_){
          							user[0].address.splice(i,1);
          						}
                    $api.setStorage('user', user);
          					}

          					api.sendEvent({
          					    name: 'csdz',
          					    extra: {
          					        user: user
          					    }
          					});
          	    } else {
          	        alert('数据库连接失败');
          	    }
          	});

        }

        function returnframe3() {
          api.closeWin();
        }

        function Win_tjdz() {
          api.openWin({
                  name: 'tjdz',
                  url: './tjdz.html',
                  opaque: true,
                  vScrollBarEnabled: false
          });
        }

        function Win_bjdz(id_){
          api.openWin({
            name: 'bjdz',
            url: './bjdz.html',
            opaque: true,
            vScrollBarEnabled: false,
              pageParam: {
                  address_id: id_
              }
          });
        }
  </script>
  </html>
